/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@import '../commons/index.css';
@import '../overlay/index.css';

:root {
  /* Bug: this must be 0ms, not 0 */
  --spectrum-dialog-exit-animation-delay: 0ms;
}

.spectrum-Tray-wrapper {
  inset-inline-start: 0;
  position: absolute;
  top: 0;

  display: flex;
  justify-content: center;
  width: 100%;
  height: 100dvh;

  /* Don't catch clicks */
  pointer-events: none;

  /* Appear above underlay */
  z-index: 2;
}

.spectrum-Tray {
  composes: spectrum-overlay;

  /* defined here so it can be accessed from JS */
  --spectrum-tray-margin-top: 64px;
  /* Overridden so that trays are full width on modern iPhone displays.
   * iPhone 13 Pro Max has a width of 428px. Add some buffer to be safe. */
  --spectrum-tray-max-width: 450px;

  width: var(--spectrum-tray-width);
  max-width: var(--spectrum-tray-max-width);
  min-height: var(--spectrum-tray-min-height);
  /* On mobile browsers, vh units are fixed based on the maximum height of the screen.
   * However, when you scroll, the toolbar and address bar shrink, making the viewport resize.
   * The visual viewport also shrinks when the keyboard is displayed. We use the VisualViewport
   * API in JS to set this CSS variable to ensure the height is correct. */
  max-height: calc(var(--spectrum-visual-viewport-height) - var(--spectrum-tray-margin-top));
  /* Add padding at the bottom to account for the rest of the viewport height behind the keyboard.
   * This is necessary so that there isn't a visible gap that appears while the keyboard is animating
   * in and out. Fall back to the safe area inset to account for things like iOS home indicator.
     We also add an additional 100vh of padding (offset by the bottom position below) so the tray
     extends behind Safari's address bar and keyboard in iOS 26. */
  padding-bottom: calc(max(calc(100dvh - var(--spectrum-visual-viewport-height)), env(safe-area-inset-bottom)) + 100vh);
  position: absolute;
  bottom: -100vh;
  outline: none;
  display: flex;
  flex-direction: column;

  overflow-x: hidden;
  overflow-y: auto;

  border-radius: var(--spectrum-tray-full-width-border-radius) var(--spectrum-tray-full-width-border-radius) var(--spectrum-tray-border-radius) var(--spectrum-tray-border-radius);

  /* Start offset by the animation distance */
  transform: translateY(calc(100% - 100vh));

  /* Exit animations */
  transition: opacity var(--spectrum-dialog-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) var(--spectrum-dialog-exit-animation-delay),
    transform var(--spectrum-dialog-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) var(--spectrum-dialog-exit-animation-delay);

  box-sizing: content-box;
}

.is-open {
  composes: spectrum-overlay--open;

  /* Entry animations */
  transition: transform var(--spectrum-dialog-entry-animation-duration) cubic-bezier(0, 0, 0.40, 1) var(--spectrum-dialog-entry-animation-delay),
              opacity var(--spectrum-dialog-entry-animation-duration) cubic-bezier(0, 0, 0.40, 1) var(--spectrum-dialog-entry-animation-delay);

  transform: translateY(0);
}

.spectrum-Tray--fixedHeight {
  height: calc(var(--spectrum-visual-viewport-height) - var(--spectrum-tray-margin-top));
  top: var(--spectrum-tray-margin-top);
}

/* Should match --spectrum-tray-max-width above */
@media (max-width: 450px) {
  .spectrum-Tray {
    border-radius: var(--spectrum-tray-border-radius);
  }
}

@media (forced-colors: active) {
  .spectrum-Tray {
    border-width: var(--spectrum-alias-border-size-thin);
    border-style: solid solid none;
  }
}
